@import './reset';
::-webkit-input-placeholder { color:#999; }
body{
	background: #f5f8fa;
}
.container{
	width: 100%;
	background: #F5F8FA;
	overflow: hidden;
	box-sizing: border-box;
	.top-bar{
		width: 100%;
		height: calculateRem(60px);
		box-sizing: border-box;
		border-bottom: 1px solid #e0e4e8;
		background: white;
		padding: 0 calculateRem(16px);
		font-size: 0;
		.top-l{
			width: 70%;
			height: calculateRem(60px);
			line-height: calculateRem(60px);
			float: left;
			color: #2C3338;
			font-size: calculateRem(17px);
			@include ell;
			font-weight: bold;
		}
		.top-r{
			width: 30%;
			height: calculateRem(60px);
			line-height: calculateRem(60px);
			float: left;
			text-align: right;
			>span{
				font-size: calculateRem(14px);
				color: #2C3338;
				&:after{
					content: '';
					width: calculateRem(11px);
					height: calculateRem(11px);
					display: inline-block;
					background: url(../images/goto14@2x.png) no-repeat;
					background-size: 100%;
					margin-left: calculateRem(8px);
				}
			}
		}
	}
	
	.main{


	.left-nav{
		width: 29%;
		position: fixed;
		z-index: 1;
		left: 0;
		bottom: 0;
		top: calculateRem(71px);
		overflow-y: auto;
		box-sizing: border-box;
		border-right: 1px solid #f3f1f1;
		background: white;
		.nav{
			width: 100%;
			box-sizing: border-box;
			height: calculateRem(63px);
			line-height: calculateRem(42px);
			border-bottom: 1px solid #f3f1f1;
			padding: calculateRem(10px) calculateRem(16px);
			font-size: calculateRem(15px);
			color: #2C3338;
			overflow: hidden;
			&:active{
				background: #fcfcfc;
			}

			.nav-inner{
				width: 100%;
				max-height: calculateRem(42px);
				line-height: calculateRem(21px);
			    display: inline-block;
			    vertical-align: middle;
			    overflow: hidden;
				>span{
					width: 100%;
					display: inline-block;
					@include mulell(2);
    				overflow: hidden;
				}
			}
		}
		.active{
			color: #E62622;
		}
	}
	.right-container{
		width: 71%;
		position: fixed;
		z-index: 1;
		right: 0;
		bottom: 0;
		top: calculateRem(71px);
		overflow-y: auto;
		background: white;
		.p-wrap{
			width: 100%;
			height: auto;
			.p-box{
				width: 100%;
				height: auto;
				box-sizing: border-box;
				padding: calculateRem(19px) calculateRem(14px) calculateRem(7px) calculateRem(22px);
				&:active{
					background: #fcfcfc;
				};
				.p-top{
					width: 100%;
					height: calculateRem(52px);
					.pic{
						width: calculateRem(48px);
						height: calculateRem(48px);
						border-radius: 50%;
						box-sizing: border-box;
						overflow: hidden;
						margin-right: calculateRem(9px);

						>img{
							width: 100%;
							height: 100%;

						}

					}
					.infos{
						max-width: 72%;
						.name_btn{
							width: 100%;
							height: calculateRem(26px);
							line-height: calculateRem(26px);
							margin-top: calculateRem(4px);
							.name{
								font-size: calculateRem(18px);
								color: #333;
								font-weight: bold;
								width: 55%;
								height: calculateRem(26px);
								float: left;
								@include ell;

							}
							.select{
								width: 45%;
								height: calculateRem(26px);
								float: left;
								text-align: right;
								.btn{
									display: inline-block;
									width: calculateRem(56px);
									height: calculateRem(22px);
									line-height: calculateRem(22px);
									border-radius: 2px;
									background: #EB1F10;
									color: white;
									font-size: calculateRem(14px);
									text-align: center;
								}

							}

						}
						.book{
							width: 100%;
							height: calculateRem(18px);
							color: #4B4B4B;
							font-size: calculateRem(12px);
							@include ell;
						}

					}
				}
				.des{
					color: #4B4B4B;
					font-size: calculateRem(13px);
					line-height: calculateRem(19px);
					max-height: calculateRem(40px);
					@include mulell(2);
					overflow: hidden;
				}
			}
		}
		.empty{
			text-align: center;
			overflow: hidden;
			>img{
				width: calculateRem(60px);
				height: calculateRem(60px);
				margin-top: calculateRem(68px);
			}
			>p{
				color: #5C656B;
				margin-top: calculateRem(14px);
				font-size: calculateRem(15px);
			}
		}
	}

	}

	.none{
		background: white;
		position: fixed;
		z-index: 1;
		bottom: 0;
		left: 0;
		right: 0;
		top: calculateRem(71px);
		text-align: center;
		>img{
			width: calculateRem(60px);
			height: calculateRem(60px);
			margin-top: calculateRem(71px);
		}
		>p{
			margin-top: calculateRem(6px);
			line-height: calculateRem(22px);
			color: #5C656B;
			font-size: calculateRem(15px);
		}


	}


}